import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Modal } from 'antd-mobile';
import classNames from 'classnames';
import PubSub from 'pubsub-js';
import CategoryTabs from './components/CategoryTabs';
import NotBindTips from './components/NotBindTips';
import DeviceControl from './components/DeviceControl';
import MySearchBar from './components/MySearchBar';
import SingleAlbum from './components/SingleAlbum';
import FloatActionButton from './components/FloatActionButton';
import HomeRecommend from './components/HomeRecommend';
import Settings from './components/Settings';
import Members from './components/Members';
import UserInfoEdit from './components/UserInfoEdit';
import CategoryAlbums from './components/CategoryAlbums';
import Upgrade from './components/Upgrade';
import WXbind from './components/WXbind';
import ScanBind from './components/ScanBind';
import UnbindDevice from './components/UnbindDevice';
import ShareDevice from './components/ShareDevice';
import RankAlbum from './components/RankAlbum';
import MyStoryDevice from './components/MyDeviceStory';
import MyFavorite from './components/MyFavorite';
import MyStoreCategorys from './components/MyStoreCategorys';

import {
	getopenid,
	getDeviceId,
} from './utils'
import './App.css'

// 监听浏览器返回事件的处理
window.onpopstate = function (event) {
	PubSub.publish('contrlDevice', {})
};

const alert = Modal.alert;
class App extends Component {

	constructor(props, context) {
		super(props, context);
		const versionCode = localStorage.getItem('app_version_code');
		this.story = "/story_" + versionCode;
		this.myDevice = "/mydevice_" + versionCode;
		this.state = {
			deviceId: 0,
			showTips: false,  // 右下角小圆圈
			showPlayer: false, // 底部播放器
		}
	}

	floatAction = () => {
		const flag = !this.state.showPlayer;
		this.setState({
			showPlayer: flag,
		});
	}

	componentDidMount() {
		document.title = localStorage.getItem('device_name');
		this.subscribe = PubSub.subscribe('showTips', (topic, show) => {
			// 只要tips小圆圈隐藏那么底部的操作播放一定是隐藏状态
			const deviceId = getDeviceId();
			this.setState({
				deviceId:deviceId,
				showTips:show
			});
		});

		const openid = getopenid();
		if (!openid || openid === 'undefined') {
			this.loginFailed();
		}
	}

	componentWillUnmount() {
		PubSub.unsubscribe(this.subscribe);
	}

	// 登录失败
	loginFailed() {
		const msg = '登录失败,请确保微信版本已是最新版本';
		this.dialog = alert('', msg,
			[
				{
					text: '确定', onPress: () =>
						window.wx.closeWindow()
				}
			]);
	}


	render() {
		return (
			<BrowserRouter>
				<div>
					<Route path={this.story} component={HomeRecommend} />
					<Route path={this.myDevice} component={MyStoryDevice} />
					<Route path="/wxbind" component={WXbind}/>

					<Route path="/tabs" component={CategoryTabs} />
					<Route path="/search" component={MySearchBar} />
					<Route path="/album" component={SingleAlbum} />
					<Route path="/album_group" component={CategoryAlbums} />
					<Route path="/rank_album" component={RankAlbum} />
					<Route path="/settings" component={Settings} />
					<Route path="/members" component={Members} />
					<Route path="/editinfo" component={UserInfoEdit} />
					<Route path="/not_bind" component={NotBindTips} />
					<Route path="/upgrade/:new_version/:uuid" component={Upgrade} />
					<Route path="/scanbind" component={ScanBind} />
					<Route path="/soundbind" component={ScanBind} />
					<Route path="/unbind" component={UnbindDevice} />
					<Route path="/share_device/:ticket" component={ShareDevice} />
					<Route path="/mydevice" component={MyStoryDevice} />
					<Route path="/myfavorite" component={MyFavorite} />
					<Route path="/mystore" component={MyStoreCategorys} />

					<FloatActionButton show={this.state.showTips} floatAction={this.floatAction} />
					<div className={classNames('App-player', this.state.showPlayer && this.state.showTips ? 'App-player-visible' : 'App-player-hidden')}>
						<DeviceControl deviceId={this.state.deviceId} isDeploy={this.state.showPlayer}/>
					</div>
				</div>
			</BrowserRouter >
		);
	}
}

export default App;
